<template>
  <div>
    <form>
      <div>
        <label>姓名：</label>
        <input type="text" v-model="leaveApplications.RealName" />
      </div>
      <div>
        <label>部门：</label>
        <input type="text" v-model="leaveApplications.Department" />
      </div>
      <div>
        <label>开始日期：</label>
        <input type="date" v-model="leaveApplications.StartDate" />
      </div>
      <div>
        <label>结束日期：</label>
        <input type="date" v-model="leaveApplications.EndDate" />
      </div>
      <div>
        <label>请假天数：</label>
        <input type="text" v-model="leaveApplications.Datetian" />
      </div>
      <div>
        <label>请假类型：</label>
        <select v-model="leaveApplications.LeaveType">
          <option value="">请选择</option>
          <option value="病假">病假</option>
          <option value="年假">年假</option>
          <option value="婚假">婚假</option>
          <option value="事假">事假</option>
          <option value="产假">产假</option>
          <option value="丧假">丧假</option>
          <option value="工伤假">工伤假</option>
        </select>
      </div>
      <div>
        <label>请假事由：</label>
        <textarea v-model="leaveApplications.Purpose"></textarea>
      </div>

      <hr>

      <label class="AaA">下一步审批人：</label>
      <div class="AAA">
        <div class="aaa">
          <select v-model="nextApprover" class="asas">
            <option value="">请选择</option>

          </select>
        </div>
      </div>
      <div class="aaaa">
        <button type="button" style="margin-right: 50px;" @click="submitApplication">确定</button>
        <button type="button" @click="cancelApplication">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";

export default {
  data() {
    return {
      leaveApplications: {
        RealName: '',
        Department: '',
        StartDate: '',
        EndDate: '',
        Datetian: '',
        LeaveType: '',
        Purpose: ''
      },
      nextApprover: '',
      // 用于标记是否正在提交申请，方便展示加载状态给用户
      isSubmitting: false
    };
  },
  methods: {
    // 提交请假申请的方法
    submitApplication() {
      this.isSubmitting = true; // 设置为正在提交状态，可用于显示加载提示
      axios.post('/api/leave-applications', this.leaveApplications)
        .then(response => {
          console.log('请假申请提交成功', response.data);
          // 可以在这里添加更多成功后的操作，比如提示用户申请已提交成功、清空表单等
          this.resetForm();
        })
        .catch(error => {
          console.error('请假申请提交失败', error);
          // 可以添加错误提示逻辑，告知用户提交失败的原因
        })
        .finally(() => {
          this.isSubmitting = false; // 无论提交成功与否，都重置提交状态
        });
    },
    // 取消申请的方法，这里简单重置表单
    cancelApplication() {
      this.resetForm();
    },
    // 重置表单数据的方法
    resetForm() {
      this.leaveApplications = {
        RealName: '',
        Department: '',
        StartDate: '',
        EndDate: '',
        Datetian: '',
        LeaveType: '',
        Purpose: ''
      };
      this.nextApprover = '';
    },
    // 获取审批人列表的方法，从后端接口获取数据
    async fetchApprovers() {
      try {
        const response = await axios.get('/api/approvers');
        return response.data;
      } catch (error) {
        console.error('获取审批人列表失败', error);
        return [];
      }
    },
    // 在组件挂载时调用获取审批人列表的方法，填充下拉框选项
    async mounted() {
      const approvers = await this.fetchApprovers();
      // 将获取到的审批人数据格式转换为适合下拉框v-model绑定的格式，示例如下
      const options = approvers.map(approver => ({
        value: approver.id,
        label: approver.name
      }));
      // 设置默认选中项（这里简单取第一个选项，可根据实际需求调整）
      this.nextApprover = options[0]?.value || '';
    }
  }
};
</script>

<style>

hr{
  border: 1px solid #000000;
  margin-bottom: 20px;
}

.aaaa{
  position: relative;
  left: 1000px;
  top: -70px;
  width: 100%;

  height: 100%;
  justify-content: space-around; /* 按钮水平均匀分布 */

}

.AaA{
  position: relative;

  top: 20px;
}

.AAA{
  transform: translateX(120px);
}

.aaa{
  transform: translateY(-20px);
}

/*.move-down {*/
/*  transform: translateX(125px); /* 向右移动20px */
/*}*/

/*.move-down { */
/*transform: translateY(-20px);  向下移动20px */
/*} */

.asas{
  width: 50%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

form {
  width: 100%;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button[type="button"] {
  margin-right: 10px;
}

button[type="button"]:nth-child(1) {
  background-color: #4CAF50;
  color: white;
}

button[type="button"]:nth-child(2) {
  background-color: #f44336;
  color: white;
}

button[type="button"]:hover {
  opacity: 0.8;
}
</style>
